<template>
    <div class="loading-container">
        <div class="loading-animation">
            <svg class="spinner" width="50" height="50" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
            </svg>
        </div>
        <p v-if="text" class="loading-text">{{ text }}</p>
    </div>
</template>

<script lang="ts" setup>
defineProps({
    text: {
        type: String,
        required: false,
        default: ''
    }
});
</script>

<style scoped>
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.loading-animation {
    width: 50px;
    height: 50px;
}

.spinner {
    animation: rotate 2s linear infinite;
}

.path {
    stroke: #DC2626;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.loading-text {
    margin-top: 1rem;
    font-size: 1rem;
    color: #4B5563;
    text-align: center;
}
</style>
